<template>
  <v-container fluid>
    <v-row>
      <v-col>
        <v-toolbar flat color="secondary">
          <v-toolbar-title>新建轮播图</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="submitAdd()">
            <v-icon>mdi-check</v-icon>
          </v-btn>
        </v-toolbar>
      </v-col>
    </v-row>
    <v-form ref="form1" class="full-width px-3">
      <v-row>
        <v-col sm="4" cols="12">
          <v-text-field
              label="标题"
              ref="title"
              v-model="form.title"
              :rules="[rules.required,rules.maxLength(40)]"
              :counter="40"
          ></v-text-field>
        </v-col>
        <v-col sm="4" cols="12">
          <my-image-upload
              max-count="1"
              @onUpdate="onImgUpdate"
          >
          </my-image-upload>
        </v-col>

      </v-row>
      <v-row>
        <v-col sm="4" cols="12">
          <v-text-field
              label="类型"
              v-model="form.type"
              disabled
          ></v-text-field>
        </v-col>
        <v-col sm="4" cols="12">
          <v-text-field
              label="内容标题"
              v-model="form.previewTitle"
              disabled
          ></v-text-field>
        </v-col>
        <v-col sm="4" cols="12">
          <v-btn color="primary" @click="showChooseContent=true">
            选择内容
          </v-btn>
        </v-col>
      </v-row>
    </v-form>
<!--    提交动画-->
    <v-overlay :value="overlay">
      <v-progress-circular
          indeterminate
          size="80"
      ></v-progress-circular>
      <v-card-text class="text-center px-0">正在保存</v-card-text>
    </v-overlay>

    <!--    选择内容 -->
    <v-dialog
        v-model="showChooseContent"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          选择内容
        </v-card-title>
        <v-card-text>
          <v-tabs
              v-model="tab"
              align-with-title
          >
            <v-tabs-slider color="primary"></v-tabs-slider>

            <v-tab key="0">文章</v-tab>
            <v-tab key="1">产品</v-tab>
            <v-tab key="2">系统消息</v-tab>
          </v-tabs>
          <v-tabs-items v-model="tab">
<!--            文章-->
            <v-tab-item key="0">
              <v-data-table
                  :headers="articleHeaders"
                  :items="articles"
                  item-key="aid"
                  class="elevation-1"
                  disable-filtering
                  :loading="articleLoading"
                  :options.sync="articleOptions"
                  :server-items-length="articleTotal"
                  loading-text="正在加载~"
                  no-data-text="没有数据"
                  no-results-text="找不到哦"
                  :footer-props="{itemsPerPageAllText:'所有',itemsPerPageText:'每页条数'}"
              >
                <template v-slot:item.actions="{ item }">
                  <v-icon
                      class="mr-2"
                      @click="choose('article',item.aid,item.title)"
                  >
                    mdi-checkbox-marked-circle-plus-outline
                  </v-icon>
                </template>
              </v-data-table>
            </v-tab-item>
<!--            点评-->
            <v-tab-item key="1">
              <v-data-table
                  :headers="productionHeaders"
                  :items="productions"
                  item-key="pid"
                  class="elevation-1"
                  disable-filtering
                  :loading="productionLoading"
                  :options.sync="productionOptions"
                  :server-items-length="productionTotal"
                  loading-text="正在加载~"
                  no-data-text="没有数据"
                  no-results-text="找不到哦"
                  :footer-props="{itemsPerPageAllText:'所有',itemsPerPageText:'每页条数'}"
              >
                <template v-slot:item.actions="{ item }">
                  <v-icon
                      class="mr-2"
                      @click="choose('production',item.pid,item.title)"
                  >
                    mdi-checkbox-marked-circle-plus-outline
                  </v-icon>
                </template>
              </v-data-table>
            </v-tab-item>
<!--            系统消息-->
            <v-tab-item key="2">
              <v-data-table
                  :headers="messageHeaders"
                  :items="messages"
                  item-key="mid"
                  class="elevation-1"
                  disable-filtering
                  :loading="messageLoading"
                  :options.sync="messageOptions"
                  :server-items-length="messageTotal"
                  loading-text="正在加载~"
                  no-data-text="没有数据"
                  no-results-text="找不到哦"
                  :footer-props="{itemsPerPageAllText:'所有',itemsPerPageText:'每页条数'}"
              >
                <template v-slot:item.actions="{ item }">
                  <v-icon
                      class="mr-2"
                      @click="choose('message',item.mid,item.title)"
                  >
                    mdi-checkbox-marked-circle-plus-outline
                  </v-icon>
                </template>
              </v-data-table>
            </v-tab-item>
          </v-tabs-items>
        </v-card-text>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="showChooseContent = false">取消</v-btn>
        </v-card-actions>
      </v-card>

    </v-dialog>
  </v-container>
</template>

<script>
import {printMsg, rules} from "../../util/util";
import MyImageUpload from "../../components/MyImageUpload";

export default {
  name: "newCarousel",
  components: {MyImageUpload},
  data: () => ({
    rules: rules,
    form: {
      title: '',
      type: '',
      toId: '',
      previewTitle: '',
      picture: '',
    },

    articles:[],
    articleLoading:false,
    articleOptions:{},
    articleHeaders:[
      {text: 'Id', value: 'aid', align: 'center', sortable: false,},
      {text: '标题', value: 'title', align: 'center', sortable: false,},
      {text: '操作', value: 'actions', align: 'center', sortable: false,},
    ],
    productions:[],
    productionLoading:false,
    productionOptions:{},
    productionHeaders:[
      {text: 'Id', value: 'pid', align: 'center', sortable: false,},
      {text: '标题', value: 'title', align: 'center', sortable: false,},
      {text: '操作', value: 'actions', align: 'center', sortable: false,},
    ],
    messages:[],
    messageOptions: {},
    messageLoading:false,
    messageHeaders:[
      {text: 'Id', value: 'mid', align: 'center', sortable: false,},
      {text: '标题', value: 'title', align: 'center', sortable: false,},
      {text: '操作', value: 'actions', align: 'center', sortable: false,},
    ],

    articleTotal:0,
    productionTotal:0,
    messageTotal:0,

    skinTypes: [],
    types: [],
    brands: [],
    pictures: [],
    overlay: false,
    showChooseContent: false,
    tab: 0,
  }),
  watch: {
    articleOptions: {
      handler() {
        this.getArticles()
      },
      deep: true,
    },
    productionOptions: {
      handler() {
        this.getProductions()
      },
      deep: true,
    },
    messageOptions: {
      handler() {
        this.getMessages()
      },
      deep: true,
    },
  },
  methods: {
    onImgUpdate(imgs) {
      // if (imgs.new) {
      //   printMsg('new images: ' + imgs.new, this)
      // }
      // if (imgs.old) {
      //   printMsg('old images: ' + imgs.old, this)
      // }
      this.form.picture = imgs.new[0]
    },
    submitAdd() {
      if (!this.$refs['title'].validate()){
        return
      }

      if (!this.form.toId){
        this.$emit("toast",'必须选择内容')
        return;
      }

      printMsg(this.form.picture)
      if (!!this.form.picture) {
        this.overlay = true
        let data = {base64File: this.form.picture}
        this.$http.post('file/saveImage', data).then(res => {
          this.form.picture = res.data.fileName
          this.doCommit()
        }).catch(res => {
          this.overlay = false
          printMsg(res.msg, this)
        })
      } else {
        this.$emit("toast",'必须添加图片')
      }
    },
    doCommit() {
      printMsg("准备提交的数据：", this)
      printMsg(this.form, this)

      let data = this.form
      this.$http.post('carousel/addCarousel', data).then(res => {
        this.$emit('toast', "添加成功")
        this.$emit('closeTab', {title: '新建轮播图', route: '/admin/newCarousel'})
        this.overlay = false
      }).catch(res => {
        this.$emit("toast", res.msg)
        this.overlay = false
      })
    },
    choose(type,id,previewTitle){
      this.form.type = type
      this.form.toId = id
      this.form.previewTitle = previewTitle
      this.showChooseContent = false
    },
    getArticles(){
      this.articleLoading = true
      const {sortBy, sortDesc, page, itemsPerPage} = this.articleOptions
      let data = {
        page: page,
        row: itemsPerPage
      }
      this.$http.post('article/listArticle', data).then(res => {
        this.articles = res.data?res.data:[]
        this.articleTotal = res.total
        this.articleLoading = false
      }).catch(res => {
        this.$emit("toast",res.msg)
        this.articleLoading = false
      })
    },
    getProductions(){
      this.productionLoading = true
      const {sortBy, sortDesc, page, itemsPerPage} = this.productionOptions
      let data = {
        page: page,
        row: itemsPerPage
      }
      this.$http.post('production/listProduction', data).then(res => {
        this.productions = res.data?res.data:[]
        this.productionTotal = res.total
        this.productionLoading = false
      }).catch(res => {
        this.$emit("toast",res.msg)
        this.productionLoading = false
      })
    },
    getMessages(){
      this.messageLoading = true
      const {sortBy, sortDesc, page, itemsPerPage} = this.messageOptions
      let data = {
        toUid:'ALL',
        page: page,
        row: itemsPerPage
      }
      this.$http.post('message/listMessages', data).then(res => {
        this.messages = res.data?res.data:[]
        this.messageTotal = res.total
        this.messageLoading = false
      }).catch(res => {
        this.$emit("toast",res.msg)
        this.messageLoading = false
      })
    },
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
